<template>
  <div class="content-box">
    <div class="left">
      <div v-for="(item,index) in rubbishlist" :key="index" :class="type == index ? 'active':''"
        :style="{'background-color':type == index ? item.bgc :''}" v-text="item.name" @click="change(item.type)"></div>
    </div>
    <div class="leftCopy">
    </div>
    <div class="content">
      <div class="info">
        <div class="img"><img :src="rubbishlist[type].img" alt=""></div>
        <div class="msg">
          <div class="desc" v-html="rubbishlist[type].desc"></div>
          <div class="tip" v-html="rubbishlist[type].tip" v-if="rubbishlist[type].tip"></div>
        </div>

        <div class="ul">
          <div>常见物品:</div>
          <div class="button">
            <div v-for="(item,index) in rubbishlist[type].goods" :key="index">
              <div v-text="item"></div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      rubbishlist: [
        {
          name: "可回收垃圾",
          type: 0,
          bgc: "#0181bc",
          img:
            "http://image.fllaji.com/storage/10500/banner/20190723/20190723150647_83190.png?_t=1563868274",
          desc: "&emsp;&emsp;可回收垃圾是指适宜回收、可循环利用的生活废弃物。",
          tip:
            "&emsp;&emsp;轻投轻放；清洁干燥，避免污染，费纸尽量平整；立体包装物请清空内容物，清洁后压扁投放；有尖锐边角的、应包裹后投放",
          goods: ["易拉罐", "塑料瓶", "橡胶", "插座", "玩具", "可乐罐", "衣服"]
        },
        {
          name: "有害垃圾",
          type: 1,
          bgc: "#c60e02",
          img:
            "http://image.fllaji.com/storage/10500/banner/20190723/20190723151621_55757.png?_t=1563868316",
          desc:
            "&emsp;&emsp;有害垃圾是指存有对人体健康有害的重金属、有毒的物质或者对环境造成现实危害或者潜在危害的废弃物。",
          tip:
            "&emsp;&emsp;分类投放有害垃圾时，应注意轻放。其中：废灯管等易破损的有害垃圾应连带包装或包裹后投放；废弃药品宜连带包装一并投放；杀虫剂等压力罐装容器，应排空内容物后投放；在公共场所产生有害垃圾且未发现对应收集容器时，应携带至有害垃圾投放点妥善投放。",
          goods: [
            "灯泡",
            "药品",
            "化妆品",
            "染发剂",
            "杀虫剂",
            "除草剂",
            "水银"
          ]
        },
        {
          name: "厨余垃圾",
          type: 2,
          bgc: "#008e50",
          img:
            "http://image.fllaji.com/storage/10500/banner/20190723/20190723151558_12513.png?_t=1563868308",
          desc:
            "&emsp;&emsp;厨余垃圾是指居民日常生活及食品加工、饮食服务、单位供餐等活动中产生的垃圾。",
          tip:
            "&emsp;&emsp;纯流质的食物垃圾、如牛奶等，应直接倒进下水口。有包装物的湿垃圾应将包装物去除后分类投放、包装物请投放到对应的可回收物或干垃圾容器",
          goods: [
            "猪爪骨",
            "面包",
            "苹果核",
            "鸡蛋核",
            "绿叶菜",
            "鸡肉",
            "剩饭",
            "蔬菜",
            "花卉"
          ]
        },
        {
          name: "其他垃圾",
          type: 3,
          bgc: "#7a7d7f",
          img:
            "http://image.fllaji.com/storage/10500/banner/20190723/20190723151533_69602.png?_t=1563868298",
          desc:
            "&emsp;&emsp;指除可回收物、有害垃圾、厨余垃圾（湿垃圾）以外的其它生活废弃物。",
          tip: "",
          goods: [
            "笔",
            "头发",
            "卫生纸",
            "芦苇叶",
            "塑料袋",
            "打包盒",
            "灰土",
            "烟蒂",
            "陶瓷"
          ]
        }
      ]
    };
  },
  created() {},
  methods: {
    change(type) {
      this.type = type;
    }
  },
  components: {},
  computed: {}
};
</script>

<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.content-box {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
  .leftCopy {
    height: 100%;
    width: 200px;
  }
  .left {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 200px;
    border-right: 1px solid #e5e5e5;
    .active {
      color: #fff;
    }
    div {
      border-bottom: 1px solid #e5e5e5;
      height: 100px;
      font-size: 30px;
      line-height: 100px;
    }
  }
  .content {
    font-size: 24px;
    flex: 1;
    height: auto;
    width: 80%;
    overflow-y: scroll;
    margin-bottom: 60px;
    padding-bottom: 80px;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
    // flex: 1;
    .info {
      margin: 0 auto;
      box-sizing: border-box;
      border-radius: 8px;
      // border: 1px solid #e5e5e5;
      padding: 0 40px;
      .img {
        margin: 0 auto;
        width: 400px;
        height: 320px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .msg {
        font-size: 26px;
        div {
          margin-top: 50px;
          text-align: left;
          line-height: 50px;
          padding: 20px;
          border-radius: 20px;
        }
        .desc {
          background-color: #b9d9f1;
        }
        .tip {
          background-color: #f5cedb;
        }
      }
    }
  }
  .ul {
    margin-top: 40px;
    text-align: left;
    background-color: #f5e1ce;
    border-radius: 20px;
    padding: 20px;

    .button {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      div {
        min-width: 30%;
        flex: 1;
        div {
          height: 50px;
          margin-top: 30px;
          // margin-right: 30px;
          width: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20px;
          background-color: #fff;
          font-size: 26px;
        }
      }
    }
  }
}
</style>
